<template>
  <el-card shadow="never" style="margin-bottom: 0">
    <template #header> 成交占比 </template>

    <div ref="divRef" style="width: 100%; height: 300px"></div>
  </el-card>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watchEffect } from 'vue'
import useEcharts from '@/hooks/web/useEcharts'
import { EChartsOption } from 'echarts'

export default defineComponent({
  setup() {
    const divRef = ref<HTMLElement>()

    const options: EChartsOption = {
      tooltip: {
        trigger: 'item'
      },

      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '80%',
          center: ['50%', '50%'],
          color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
          data: [
            { value: 500, name: '电子产品' },
            { value: 310, name: '服装' },
            { value: 274, name: '化妆品' },
            { value: 400, name: '家居' }
          ].sort(function (a, b) {
            return a.value - b.value
          }),
          roseType: 'radius',
          animationType: 'scale',
          animationEasing: 'exponentialInOut',
          animationDelay: function () {
            return Math.random() * 400
          }
        }
      ]
    }

    onMounted(() => {
      const { setOptions } = useEcharts(divRef.value!)

      watchEffect(() => {
        setOptions(options)
      })
    })

    return {
      divRef
    }
  }
})
</script>

<style scoped></style>
